import {
  Card,
  Descriptions,
  Image,
  Tag,
  Flex,
  Row,
  Col,
  Button,
  Skeleton,
} from "antd";
import { UserOutlined } from "@ant-design/icons";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import { getImagePath, hb2 } from "../../../utils/common";
import ComponentHeader from "../../../components/Page/ComponentHeader";
import { useEffect, useState } from "react";
import suppliersApi from "../../../apis/suppliersApi";
import { useNavigate, useParams } from "react-router-dom";

const SupplierDetail = () => {
  useCloseLoadingOnMount();
  const [supplier, setSupplier] = useState({});
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const params = useParams();

  // 状态转换
  const statusMap = {
    0: { text: "未激活", color: "default" },
    1: { text: "已激活", color: "success" },
  };

  const banStatusMap = {
    0: { text: "正常", color: "green" },
    1: { text: "已封禁", color: "red" },
  };

  useEffect(() => {
    const fetchData = async () => {
      const res = await suppliersApi.getSuppliersDetail(params.id);
      if (res.status >= 0) {
        setSupplier(res.data);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  const handleEdit = () => {
    navigate("/supplier/edit/" + params.id);
  };

  return (
    <>
      {loading ? (
        <Skeleton active paragraph={{ rows: 10 }} />
      ) : (
        <Card>
          <ComponentHeader
            title={"供应商详情"}
            marginBottom
            extra={
              <Button
                color="volcano"
                variant="filled"
                onClick={() => handleEdit()}
              >
                编辑
              </Button>
            }
          />
          <Flex gap={24} wrap="wrap">
            {/* 左侧信息栏 */}
            <Card style={{ flex: 1, minWidth: 300 }}>
              <Descriptions column={1} bordered>
                <Descriptions.Item label="店铺名称">
                  {supplier.shopName}
                </Descriptions.Item>
                <Descriptions.Item label="账号">
                  <Flex align="center" gap={8}>
                    <UserOutlined />
                    {supplier.account}
                  </Flex>
                </Descriptions.Item>
                <Descriptions.Item label="企业名称">
                  {supplier.enterpriseName}
                </Descriptions.Item>
                <Descriptions.Item label="联系电话">
                  {supplier.phone}
                </Descriptions.Item>
                <Descriptions.Item label="地址">
                  {supplier.address}
                </Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag
                    color={hb2(supplier.isActive, (d) => statusMap[d].color)}
                  >
                    {hb2(supplier.isActive, (d) => statusMap[d].text)}
                  </Tag>
                  <Tag
                    color={hb2(supplier.isBan, (d) => banStatusMap[d].color)}
                    style={{ marginLeft: 8 }}
                  >
                    {hb2(supplier.isBan, (d) => banStatusMap[d].text)}
                  </Tag>
                </Descriptions.Item>
              </Descriptions>
              {/* 公告信息 */}
              <Card title="公告信息" style={{ marginTop: 24 }}>
                <div style={{ whiteSpace: "pre-wrap" }}>
                  {supplier.announcement}
                </div>
              </Card>
            </Card>

            {/* 右侧图片栏 */}
            <div style={{ flex: 1, minWidth: 300 }}>
              <Card title="企业LOGO" style={{ marginBottom: 24 }}>
                <Image
                  height={"60px"}
                  src={getImagePath(supplier.id, supplier.logo)}
                />
              </Card>
              <Card title="企业图片">
                <Flex gap={16} wrap="wrap">
                  {supplier.photo.split(",").map((img, index) => (
                    <Image
                      height={"150px"}
                      key={index}
                      src={getImagePath(supplier.id, img)}
                    />
                  ))}
                </Flex>
              </Card>
              <Card title="资质证明">
                <Flex gap={16} wrap="wrap">
                  {supplier.qualification.split(",").map((img, index) => (
                    <Image
                      height={"150px"}
                      key={index}
                      src={getImagePath(supplier.id, img)}
                    />
                  ))}
                </Flex>
              </Card>
            </div>
          </Flex>
        </Card>
      )}
    </>
  );
};

export default SupplierDetail;
